<template>
  <div class="complaint-page">
    <!-- 标题栏 - 添加返回按钮 -->
    <div class="title-bar">
      <van-icon name="arrow-left" class="back-icon" @click="goBack" />
      <span class="title-text">我要投诉</span>
    </div>
    
    <!-- 进度条 -->
    <div class="progress-bar">
      <div class="progress-item" :class="{ active: progressStep >= 1 }"></div>
      <div class="progress-item" :class="{ active: progressStep >= 2 }"></div>
      <div class="progress-item" :class="{ active: progressStep >= 3 }"></div>
      <div class="progress-item" :class="{ active: progressStep >= 4 }"></div>
    </div>
    
    <!-- 表单区域 -->
    <van-form @submit="onSubmit">
      <!-- 投诉对象 - 修改为点击跳转 -->
      <van-cell-group>
        <van-cell
          title="投诉对象"
          :value="complaints.merchantName"
          is-link
          @click="goToComplaintsPage"
        />
      </van-cell-group>

      <!-- 投诉问题 -->
      <van-cell-group>
        <van-cell
          title="投诉问题"
          :value="selectedProblem"
          is-link
          @click="handleProblemClick"
        />
        <van-popup
          v-model:show="showProblemPopup"
          position="bottom"
          class="hot-problem-popup-container"
        >
          <div class="hot-problem-popup">
            <div class="hot-problem-title">热门问题</div>
            <div class="hot-problem-tags">
              <van-tag
                v-for="tag in hotProblemTags"
                :key="tag"
                class="problem-tag"
                :class="{ 'problem-tag-active': selectedHotProblem === tag }"
                @click="selectHotProblem(tag)"
              >
                {{ tag }}
              </van-tag>
              <!-- 添加自定义+标签 -->
              <van-tag
                class="problem-tag custom-tag"
                :class="{ 'problem-tag-active': isCustomProblem }"
                @click="handleCustomProblem"
              >
                自定义+
              </van-tag>
            </div>
            <div class="confirm-btn-wrapper">
              <van-button class="confirm-btn" @click="confirmHotProblem">确认</van-button>
            </div>
          </div>
        </van-popup>
      </van-cell-group>

      <!-- 自定义问题输入弹窗 -->
      <van-popup
        v-model:show="showCustomInputPopup"
        position="bottom"
        class="custom-input-popup"
      >
        <div class="custom-input-container">
          <div class="custom-input-header">
            <div class="custom-input-title">自定义问题</div>
            <div class="word-limit">{{ customProblemInput.length }}/20</div>
          </div>
          <van-field
            v-model="customProblemInput"
            type="textarea"
            placeholder="请输入自定义问题（不超过20字）"
            rows="3"
            maxlength="20"
            show-word-limit
            class="custom-input-field"
          />
          <div class="custom-input-buttons">
            <van-button class="cancel-btn" @click="cancelCustomProblem">取消</van-button>
            <van-button class="confirm-custom-btn" @click="confirmCustomProblem">确定</van-button>
          </div>
        </div>
      </van-popup>

      <!-- 投诉要求（问题选择后显示） -->
      <template v-if="isProblemSelected">
        <van-cell-group>
          <van-cell
            title="投诉要求"
            :value="selectedRequirement"
            is-link
            @click="handleRequirementClick"
          />
          <van-popup
            v-model:show="showRequirementPopup"
            position="bottom"
            class="hot-problem-popup-container"
          >
            <div class="hot-problem-popup">
              <div class="hot-problem-title">热门要求</div>
              <div class="hot-problem-tags">
                <van-tag
                  v-for="tag in hotRequirementTags"
                  :key="tag"
                  class="problem-tag"
                  :class="{ 'problem-tag-active': selectedHotRequirement === tag }"
                  @click="selectHotRequirement(tag)"
                >
                  {{ tag }}
                </van-tag>
                <!-- 添加自定义+标签 -->
                <van-tag
                  class="problem-tag custom-tag"
                  :class="{ 'problem-tag-active': isCustomRequirement }"
                  @click="handleCustomRequirement"
                >
                  自定义+
                </van-tag>
              </div>
              <div class="confirm-btn-wrapper">
                <van-button class="confirm-btn" @click="confirmHotRequirement">确认</van-button>
              </div>
            </div>
          </van-popup>
        </van-cell-group>

        <!-- 自定义要求输入弹窗 -->
        <van-popup
          v-model:show="showCustomRequirementPopup"
          position="bottom"
          class="custom-input-popup"
        >
          <div class="custom-input-container">
            <div class="custom-input-header">
              <div class="custom-input-title">自定义要求</div>
              <div class="word-limit">{{ customRequirementInput.length }}/20</div>
            </div>
            <van-field
              v-model="customRequirementInput"
              type="textarea"
              placeholder="请输入自定义要求（不超过20字）"
              rows="3"
              maxlength="20"
              show-word-limit
              class="custom-input-field"
            />
            <div class="custom-input-buttons">
              <van-button class="cancel-btn" @click="cancelCustomRequirement">取消</van-button>
              <van-button class="confirm-custom-btn" @click="confirmCustomRequirement">确定</van-button>
            </div>
          </div>
        </van-popup>

        <!-- 后续组件（要求选择后显示） -->
        <template v-if="isRequirementSelected">
          <!-- 投诉标题 -->
          <van-field
            v-model="complaints.title"
            label="投诉标题"
            placeholder="请输入投诉标题"
            required
            clearable
            @input="checkFormCompletion"
          />

          <!-- 投诉描述 -->
          <van-field
            type="textarea"
            label="请描述您要投诉事情的过程、影响等，如："
            placeholder="我于X年X月X日在XX平台购买XX，出现XX问题，侵害了XX权益，我的诉求是XXX。（不少于20字）"
            v-model="complaints.description"
            rows="4"
            @input="checkFormCompletion"
          />

          <!-- 参考模板 -->
          <div class="desc-ops">
            <van-button size="small" type="default" @click="showTemplatePopup = true">参考模板</van-button>
            <span class="word-count">{{ complaints.description.length }}/1000</span>
          </div>

          <!-- 模板选择弹窗 -->
          <van-popup
            v-model:show="showTemplatePopup"
            position="bottom"
            class="template-popup"
          >
            <div class="template-popup-content">
              <div class="template-title">选择模板</div>
              <div class="template-list">
                <div 
                  v-for="template in templateList" 
                  :key="template.id"
                  class="template-item"
                  @click="selectTemplate(template)"
                >
                  {{ template.title }}
                </div>
              </div>
              <div class="template-buttons">
                <van-button class="cancel-btn" @click="showTemplatePopup = false">取消</van-button>
              </div>
            </div>
          </van-popup>

          <!-- 上传交易凭证 -->
          <div class="upload-section">
            <p class="upload-title">上传交易凭证（必填）</p>
            <p class="upload-tip">包含收款公司名称/店铺名称/APP名称的付款凭证/订单截图/服务协议/合同，最多上传5张图片</p>
            <p class="upload-note">注：不要上传聊天记录截图和通话记录截图</p>
            <van-uploader
              v-model="fileList"
              multiple
              :max-count="5"
              :before-read="beforeRead"
              accept="image/*"
              :after-read="afterRead"
              :delete="handleDelete"
            />
          </div>

          <!-- 隐私隐藏 -->
          <van-checkbox v-model="hidePrivacy" @change="handlePrivacyChange">隐藏 若有隐私记得隐藏</van-checkbox>

          <!-- 提交按钮 -->
          <div class="submit-btn-wrapper">
            <van-button class="submit-btn" type="primary" block native-type="submit" :loading="submitting">提交</van-button>
          </div>
        </template>
      </template>
    </van-form>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted, computed, watch } from 'vue';
import {
  Cell,
  CellGroup,
  Form,
  Field,
  Popup,
  Picker,
  Uploader,
  Button,
  Checkbox,
  Tag,
  Dialog,
  showConfirmDialog,
  showSuccessToast as Toast,
  Icon // 添加Icon组件
} from 'vant';
import { useRoute, useRouter } from 'vue-router';
import { hotProblemTagsList, hotRequirementTagsList, uploadImageApi, complaintsValue } from '@/api'; // 引入API函数
import { useUserStore } from "@/stores/user";

// 路由相关
const route = useRoute();
const router = useRouter();

const userStore = useUserStore();

// 添加返回函数
const goBack = () => {
  router.go(-1);
};

// 进度条状态
const progressStep = ref(1); // 默认第一步已激活

// 提交状态
const submitting = ref(false);

// 投诉对象相关数据
const complaints = ref({
  merchantName: route.query.merchantName,
  merchantId: route.query.merchantId,
  userId: '',
  title: '', // 投诉标题属性
  subject: '', // 投诉问题主题属性
  requirements: '', // 投诉要求属性
  attachmentUrl: '', // 用于存储上传的图片URL
  description: '', // 投诉描述属性
  hideImage: 0, // 隐私隐藏属性，0表示不隐藏，1表示隐藏
});

// 删除原有的 merchantOptions 和 showMerchantPopup 相关代码

// 投诉问题相关 - 改为从API获取
const hotProblemTags = ref([]); // 初始为空数组
const selectedHotProblem = ref('');
const selectedProblem = ref('');
const showProblemPopup = ref(false);
const isProblemSelected = ref(false);

// 自定义问题相关
const showCustomInputPopup = ref(false);
const customProblemInput = ref('');

// 投诉要求相关 - 改为从API获取
const hotRequirementTags = ref([]); // 初始为空数组
const selectedHotRequirement = ref('');
const selectedRequirement = ref('');
const showRequirementPopup = ref(false);
const isRequirementSelected = ref(false);

// 自定义要求相关
const showCustomRequirementPopup = ref(false);
const customRequirementInput = ref('');

// 上传文件列表
const fileList = ref([]);

// 隐私隐藏 checkbox - 初始化为false，对应hideImage为0
const hidePrivacy = ref(false);

// 模板相关
const showTemplatePopup = ref(false);
const templateList = ref([
  {
    id: 1,
    title: "商品质量问题投诉",
    content: "我于X年X月X日在贵平台购买了XX商品，收到货后发现存在以下问题：1.商品存在明显瑕疵；2.与商家描述不符；3.影响正常使用。这严重侵害了我的消费者权益，我的诉求是：退货退款并赔偿相应损失。"
  },
  {
    id: 2,
    title: "服务态度问题投诉",
    content: "我于X年X月X日在贵平台接受XX服务，服务过程中遇到以下问题：1.服务人员态度恶劣；2.服务流程不规范；3.服务质量不达标。这严重影响了我对贵平台的信任，我的诉求是：道歉并退还服务费用。"
  },
  {
    id: 3,
    title: "配送延迟投诉",
    content: "我于X年X月X日在贵平台下单购买XX商品，订单号为XXX，商家承诺X天内送达，但实际延迟了X天。这导致我无法按时使用商品，造成了不便和损失，我的诉求是：赔偿因延迟造成的损失。"
  },
  {
    id: 4,
    title: "虚假宣传投诉",
    content: "我于X年X月X日在贵平台看到XX商家的宣传，宣传中承诺XX功能/效果，但实际使用后发现与宣传严重不符。这属于虚假宣传行为，侵害了我的知情权，我的诉求是：退货退款并要求商家整改。"
  },
  {
    id: 5,
    title: "售后无响应投诉",
    content: "我于X年X月X日就XX问题联系商家售后，但至今未得到有效回应和解决。这严重影响了我的消费体验，我的诉求是：尽快解决问题并给予合理解释。"
  }
]);

// 计算属性：判断是否选择了自定义问题
const isCustomProblem = computed(() => {
  return customProblemInput.value && selectedHotProblem.value === customProblemInput.value;
});

// 计算属性：判断是否选择了自定义要求
const isCustomRequirement = computed(() => {
  return customRequirementInput.value && selectedHotRequirement.value === customRequirementInput.value;
});

// 跳转到选择投诉对象页面
const goToComplaintsPage = () => {
  router.push({
    name: 'complaints',
    query: {
      // 可以传递当前已选择的信息，以便回显
      currentMerchantName: complaints.value.merchantName,
      currentMerchantId: complaints.value.merchantId
    }
  });
};

// 处理隐私隐藏状态变化
const handlePrivacyChange = (checked) => {
  // 当hidePrivacy为false时，hideImage为0；当hidePrivacy为true时，hideImage为1
  complaints.value.hideImage = checked ? 1 : 0;
  console.log('隐私隐藏状态变化:', { hidePrivacy: checked, hideImage: complaints.value.hideImage });
};

// 选择模板
const selectTemplate = (template) => {
  complaints.value.description = template.content;
  showTemplatePopup.value = false;
  console.log('选择了模板:', template.title);
};

// 点击投诉问题单元格
const handleProblemClick = async () => {
  showProblemPopup.value = true;
  
  // 如果还没有加载过热门问题，或者需要重新加载，则调用API
  if (hotProblemTags.value.length === 0 && complaints.value.merchantName) {
    await loadHotProblemTags();
  }
};

// 加载热门问题标签
const loadHotProblemTags = async () => {
  try {
    const response = await hotProblemTagsList(complaints.value.merchantName);
    // 根据返回格式，从response中取hotProblemTags字段
    hotProblemTags.value = response.hotProblemTags || [];
  } catch (error) {
    console.error('加载热门问题失败:', error);
    // 如果API调用失败，可以设置一个默认的空数组
    hotProblemTags.value = [];
  }
};

// 选择热门问题
const selectHotProblem = (tag) => {
  // 如果是自定义问题，不直接选择，而是打开自定义输入
  if (tag === '自定义+') {
    handleCustomProblem();
    return;
  }
  selectedHotProblem.value = tag;
};

// 处理自定义问题
const handleCustomProblem = () => {
  showProblemPopup.value = false;
  showCustomInputPopup.value = true;
};

// 确认自定义问题
const confirmCustomProblem = () => {
  if (customProblemInput.value.trim()) {
    selectedHotProblem.value = customProblemInput.value.trim();
    selectedProblem.value = customProblemInput.value.trim();
    complaints.value.subject = customProblemInput.value.trim(); // 绑定到complaints对象的subject属性
    isProblemSelected.value = true;
    showCustomInputPopup.value = false;
    
    // 选择投诉问题后，更新进度条到第二步
    if (progressStep.value < 2) {
      progressStep.value = 2;
    }
  } else {
    alert('请输入自定义问题');
  }
};

// 取消自定义问题
const cancelCustomProblem = () => {
  showCustomInputPopup.value = false;
  // 重新打开问题选择弹窗
  setTimeout(() => {
    showProblemPopup.value = true;
  }, 300);
};

// 确认热门问题选择
const confirmHotProblem = () => {
  if (selectedHotProblem.value) {
    selectedProblem.value = selectedHotProblem.value;
    complaints.value.subject = selectedHotProblem.value; // 绑定到complaints对象的subject属性
    isProblemSelected.value = true;
    showProblemPopup.value = false;
    // 选择投诉问题后，更新进度条到第二步
    if (progressStep.value < 2) {
      progressStep.value = 2;
    }
  } else {
    alert('请选择投诉问题');
  }
};

onMounted(() => {
  complaints.value.userId = userStore.userId;
  console.log('用户ID:', complaints.value.userId);
  console.log('用户信息:', userStore);
  console.log('商户名称：', complaints.value.merchantName);
  console.log('商户ID：', complaints.value.merchantId);
});

// 点击投诉要求单元格
const handleRequirementClick = async () => {
  showRequirementPopup.value = true;
  
  // 如果还没有加载过热门要求，或者需要重新加载，则调用API
  if (hotRequirementTags.value.length === 0 && complaints.value.merchantName) {
    await loadHotRequirementTags();
  }
};

// 加载热门要求标签
const loadHotRequirementTags = async () => {
  try {
    const response = await hotRequirementTagsList(complaints.value.merchantName);
    // 根据返回格式，从response中取hotRequirementTags字段
    hotRequirementTags.value = response.hotRequirementTags || [];
  } catch (error) {
    console.error('加载热门要求失败:', error);
    // 如果API调用失败，可以设置一个默认的空数组
    hotRequirementTags.value = [];
  }
};

// 选择热门要求
const selectHotRequirement = (tag) => {
  // 如果是自定义要求，不直接选择，而是打开自定义输入
  if (tag === '自定义+') {
    handleCustomRequirement();
    return;
  }
  selectedHotRequirement.value = tag;
};

// 处理自定义要求
const handleCustomRequirement = () => {
  showRequirementPopup.value = false;
  showCustomRequirementPopup.value = true;
};

// 确认自定义要求
const confirmCustomRequirement = () => {
  if (customRequirementInput.value.trim()) {
    selectedHotRequirement.value = customRequirementInput.value.trim();
    selectedRequirement.value = customRequirementInput.value.trim();
    complaints.value.requirements = customRequirementInput.value.trim(); // 绑定到complaints对象的requirements属性
    isRequirementSelected.value = true;
    showCustomRequirementPopup.value = false;
    
    // 选择投诉要求后，更新进度条到第三步
    if (progressStep.value < 3) {
      progressStep.value = 3;
    }
  } else {
    alert('请输入自定义要求');
  }
};

// 取消自定义要求
const cancelCustomRequirement = () => {
  showCustomRequirementPopup.value = false;
  // 重新打开要求选择弹窗
  setTimeout(() => {
    showRequirementPopup.value = true;
  }, 300);
};

// 确认热门要求选择
const confirmHotRequirement = () => {
  if (selectedHotRequirement.value) {
    selectedRequirement.value = selectedHotRequirement.value;
    complaints.value.requirements = selectedHotRequirement.value; // 绑定到complaints对象的requirements属性
    isRequirementSelected.value = true;
    showRequirementPopup.value = false;
    // 选择投诉要求后，更新进度条到第三步
    if (progressStep.value < 3) {
      progressStep.value = 3;
    }
  } else {
    alert('请选择投诉要求');
  }
};

// 上传前的校验函数
const beforeRead = (file) => {
  // 检查文件类型
  if (!file.type.startsWith('image/')) {
    alert('请上传图片文件');
    return false;
  }
  
  // 检查文件大小 (例如限制 5MB)
  const maxSize = 5 * 1024 * 1024;
  if (file.size > maxSize) {
    alert('文件大小不能超过 5MB');
    return false;
  }
  
  console.log('文件验证通过，开始上传:', file.name);
  return true;
};

// after-read事件，每个文件读取完成后触发
const afterRead = async (file) => {
  console.log('文件读取完成', file);
  try {
    const imageUrl = await uploadImage(file.file);
    console.log("imageUrl", imageUrl);
    file.url = imageUrl;
    file.status = 'done';
    
    // 上传成功后更新 attachmentUrl
    updateAttachmentUrl();
    
    console.log("fileList", fileList);
    console.log("complaints.attachmentUrl", complaints.value.attachmentUrl);
    
  } catch (error) {
    console.error('上传失败:', error);
    file.status = 'failed';
    alert('上传失败，请重试');
  }
};

// 处理文件删除
const handleDelete = (file, detail) => {
  console.log('删除文件:', file);
  // 删除文件后更新 attachmentUrl
  updateAttachmentUrl();
  console.log("删除后 complaints.attachmentUrl", complaints.value.attachmentUrl);
};

// 更新 attachmentUrl 函数
const updateAttachmentUrl = () => {
  // 从 fileList 中提取所有成功上传的文件 URL
  const urls = fileList.value
    .filter(item => item.status === 'done' && item.url)
    .map(item => item.url);
  
  // 将 URL 数组转换为逗号分隔的字符串
  complaints.value.attachmentUrl = urls.join(',');
  console.log('更新 attachmentUrl:', complaints.value.attachmentUrl);
};

// 图片上传函数
const uploadImage = async (file) => {
  try {
    const formData = new FormData();
    console.log(file);
    
    formData.append("image", file);
    // 后端上传接口
    const ret = await uploadImageApi(formData);
    const baseUrl = window.location.origin;
    
    return baseUrl + ret.url;
  } catch (e) {
    console.log("上传图片失败", e);
    return null;
  }
};

// 监听 fileList 的变化，自动更新 attachmentUrl
watch(fileList, () => {
  updateAttachmentUrl();
}, { deep: true });

// 检查表单完成情况，更新进度条
const checkFormCompletion = () => {
  // 如果投诉标题、投诉描述和上传凭证都已填写，更新进度条到第四步
  if (complaints.value.title && complaints.value.description && fileList.value.length > 0) {
    if (progressStep.value < 4) {
      progressStep.value = 4;
    }
  }
};

const onSubmit = async () => {
  console.log('投诉数据：', complaints.value);

  // 验证必填字段 - 使用Dialog弹窗显示错误信息
  if (!complaints.value.title) {
    showConfirmDialog({
      title: '提交失败',
      message: '请填写投诉标题',
      confirmButtonText: '确定'
    });
    return;
  }

  if (!complaints.value.description || complaints.value.description.length < 20) {
    showConfirmDialog({
      title: '提交失败',
      message: '投诉描述不能少于20字',
      confirmButtonText: '确定'
    });
    return;
  }

  if (fileList.value.length === 0) {
    showConfirmDialog({
      title: '提交失败',
      message: '请上传交易凭证',
      confirmButtonText: '确定'
    });
    return;
  }

  // 设置提交状态为true，显示加载中
  submitting.value = true;

  try {
    // 创建纯对象，确保字段名与后端 ComplaintsDto 完全匹配
    const submitData = {
      merchantName: String(complaints.value.merchantName),
      userId: String(complaints.value.userId),
      title: String(complaints.value.title),
      subject: String(complaints.value.subject),
      requirements: String(complaints.value.requirements),
      attachmentUrl: String(complaints.value.attachmentUrl),
      description: String(complaints.value.description),
      hideImage: Number(complaints.value.hideImage || 0),
      companyId: String(complaints.value.merchantId),
    };

    console.log('准备提交的数据:', submitData);

    // 调用 API 提交投诉数据
    const response = await complaintsValue(submitData);

    console.log('API 响应:', response);

    // 检查响应结果 - 根据你的后端返回格式调整
    if (response && response === "提交成功") { // 根据你的后端返回格式调整
      // 使用Dialog弹窗替代Toast，用户点击确定后再跳转
      showConfirmDialog({
        title: '提交成功',
        message: '投诉已提交',
        confirmButtonText: '确定'
      }).then(() => {
        // 用户点击确定后跳转到首页
        router.push({
          name: "main",
          path: "/main"
        });
      });
    } else {
      const errorMessage = response?.message || '提交失败，请重试';
      showConfirmDialog({
        title: '提交失败',
        message: errorMessage,
        confirmButtonText: '确定'
      });
    }

  } catch (error) {
    console.error('提交投诉失败:', error);

    // 更详细的错误信息
    let errorMessage = '提交失败，请检查网络连接';

    if (error.response) {
      console.error('响应状态:', error.response.status);
      console.error('响应数据:', error.response.data);

      if (error.response.status === 415) {
        errorMessage = '数据格式错误，请联系管理员';
      } else {
        errorMessage = `提交失败: ${error.response.data?.message || error.message}`;
      }
    }

    // 使用Dialog弹窗显示错误信息
    showConfirmDialog({
      title: '提交失败',
      message: errorMessage,
      confirmButtonText: '确定'
    });
  } finally {
    submitting.value = false;
  }
};

onMounted(() => {
  console.log('商户名称：', complaints.value.merchantName);
  console.log('商户ID：', complaints.value.merchantId);
});
</script>

<style scoped>
/* 原有的样式保持不变 */
.complaint-page {
  background-color: #fff;
  min-height: 100vh;
  padding: 0 16px;
}

/* 修改标题栏样式，添加返回按钮 */
.title-bar {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: bold;
  text-align: center;
  padding: 16px 0;
  height: 56px;
}

.back-icon {
  position: absolute;
  left: 0;
  font-size: 20px;
  cursor: pointer;
  padding: 8px;
}

.title-text {
  font-size: 20px;
  font-weight: bold;
}

.progress-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0 -16px;
  padding: 0 16px;
  margin-bottom: 24px;
}
.progress-item {
  width: 25%;
  height: 4px;
  background-color: #eee;
}
.progress-item.active {
  background-color: orange;
}
.desc-ops {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
}
.word-count {
  font-size: 14px;
  color: #999;
}
.upload-section {
  margin-bottom: 24px;
}
.upload-title {
  font-size: 16px;
  font-weight: 500;
  margin-bottom: 8px;
}
.upload-tip {
  font-size: 14px;
  color: #666;
  margin-bottom: 4px;
}
.upload-note {
  font-size: 14px;
  color: red;
  margin-bottom: 12px;
}
.submit-btn-wrapper {
  margin-top: 32px;
}

/* 提交按钮样式 - 与热门问题确认按钮相同 */
.submit-btn {
  background-color: #000;
  color: #ffd700;
  border-radius: 24px;
  width: 100%;
  height: 44px;
  font-size: 16px;
  font-weight: bold;
  border: none;
}

/* 模板弹窗样式 */
.template-popup {
  border-radius: 16px 16px 0 0;
  max-height: 70vh;
}

.template-popup-content {
  padding: 20px 16px;
}

.template-title {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 16px;
  text-align: center;
}

.template-list {
  margin-bottom: 20px;
  max-height: 50vh;
  overflow-y: auto;
}

.template-item {
  padding: 12px 16px;
  border-bottom: 1px solid #f0f0f0;
  font-size: 14px;
  cursor: pointer;
  transition: background-color 0.2s;
}

.template-item:hover {
  background-color: #f5f5f5;
}

.template-item:last-child {
  border-bottom: none;
}

.template-buttons {
  display: flex;
  justify-content: center;
}

/* 热门问题/要求弹窗样式 */
.hot-problem-popup-container {
  border-radius: 16px 16px 0 0;
}

.hot-problem-popup {
  padding: 20px 16px;
  max-height: 70vh;
  overflow-y: auto;
}

.hot-problem-title {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 16px;
  text-align: center;
}

.hot-problem-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 24px;
}

/* 标签样式 */
.problem-tag {
  border-radius: 20px;
  color: #000;
  background-color: #f5f5f5;
  border: 1px solid #e0e0e0;
  padding: 8px 16px;
  font-size: 14px;
  transition: all 0.2s;
  cursor: pointer;
}

.problem-tag:hover {
  background-color: #eeeeee;
}

/* 激活状态标签样式 - 黑底黄字 */
.problem-tag-active {
  background-color: #000 !important;
  color: #ffd700 !important;
  border-color: #000 !important;
}

/* 自定义标签特殊样式 */
.custom-tag {
  border: 1px dashed #666;
}

/* 确认按钮样式 */
.confirm-btn-wrapper {
  display: flex;
  justify-content: center;
  padding: 0 16px;
}

.confirm-btn {
  background-color: #000;
  color: #ffd700;
  border-radius: 24px;
  width: calc(100% - 32px);
  height: 44px;
  font-size: 16px;
  font-weight: bold;
  border: none;
}

/* 自定义输入弹窗样式 */
.custom-input-popup {
  border-radius: 16px 16px 0 0;
  height: 40vh;
}

.custom-input-container {
  padding: 20px 16px;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.custom-input-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.custom-input-title {
  font-size: 18px;
  font-weight: bold;
}

.word-limit {
  font-size: 14px;
  color: #999;
}

.custom-input-field {
  flex: 1;
  margin-bottom: 20px;
}

.custom-input-buttons {
  display: flex;
  gap: 12px;
}

.cancel-btn, .confirm-custom-btn {
  flex: 1;
  height: 44px;
  border-radius: 22px;
  font-size: 16px;
  font-weight: bold;
}

.cancel-btn {
  background-color: #f5f5f5;
  color: #333;
  border: 1px solid #e0e0e0;
}

.confirm-custom-btn {
  background-color: #000;
  color: #ffd700;
  border: none;
}
</style>